<template>
  <MyAlert
    type="success"
    message="角色是一个逻辑集合，你可以授权一个角色某些资源与操作权限，当你将角色授予给用户后，该用户将会继承这个角色中的所有权限。"
  />
  <BasicTable @register="registerTable">
    <template #tableTitle>
      <a-button type="primary" @click="handleCreate"> <Icon icon="i-ant-design:plus-outlined" /> {{ "新增" }} </a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="batchHandleDelete">
              <Icon icon="i-ant-design:delete-outlined" />
              删除
            </a-menu-item>
          </a-menu>
        </template>
        <a-button
          >批量操作
          <Icon icon="i-mdi:chevron-down" />
        </a-button>
      </a-dropdown>
    </template>
    <!-- <template #toolbar>
      
    </template> -->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
    </template>
  </BasicTable>
  <RoleUserTable @register="roleUserDrawer" />
  <RoleDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />
  <RoleDesc @register="registerDesc" />
  <RoleDesignModal @register="registerModal" />
  <SubjectAuthorize  @register="registerSubjectAuthorize"/>
</template>
<script lang="ts" name="system-role" setup>
  import { ref } from "vue"
  import { BasicTable, TableAction } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useModal } from "/@/components/Modal"
  import RoleDrawer from "./components/RoleDrawer.vue"
  import RoleDesc from "./components/RoleDesc.vue"
  import MyAlert from "/@/components/My/MyAlert.vue"
  import * as roleApi from "/@/api/iam/role"
  import RoleDesignModal from "./components/RoleDesignModal.vue"
  import RoleUserTable from "./components/RoleUserTable.vue"
  import { SubjectAuthorize } from "/@/components/My/SubjectAuthorize/index"
  import { useUserStore } from "/@/store/modules/user"
  import { columns, searchFormSchema, RoleEnum } from "./role.data"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { Icon } from "/@/components/Icon"
  import * as permPolicyApi from "/@/api/iam/permPolicy"
  const showFooter = ref(true)
  const [roleUserDrawer, { openDrawer: openRoleUserDrawer }] = useDrawer()
  const [registerSubjectAuthorize, { openDrawer: openSubjectAuthorize }] = useDrawer()
  const [registerDrawer, { openDrawer }] = useDrawer()
  const [registerModal, { openModal }] = useModal()
  const [registerDesc, { openDrawer: openRoleDesc }] = useDrawer()
  const props = defineProps({
    apiNamespaceCode: { type: String, default: null },
  })
  
  const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
    designScope: "role-template",
    tableProps: {
      title: "角色列表",
      beforeFetch: (params) => {
        params.apiNamespaceCode = props.apiNamespaceCode
        return params
      },
      api: roleApi.pageRole,
      columns: columns,
      bordered: false,
      formConfig: {
        schemas: searchFormSchema,
      },
      actionColumn: {
        width: 120,
      },
      rowSelection: undefined,
    }
  })
  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext

  function handleCreate() {
    showFooter.value = true
    openDrawer(true, {
      adminFlag: true,
      isUpdate: false,
    })
  }

  function handleEdit(record: Recordable) {
    showFooter.value = true
    openDrawer(true, {
      record,
      adminFlag: true,
      isUpdate: true,
    })
  }

  function handleDetail(record) {
    showFooter.value = false
    openRoleDesc(true, {
      record,
      isUpdate: true,
    })
  }

  async function handleDelete(record) {
    await roleApi.deleteAdminRole({ id: record.id }, reload)
  }

  async function batchHandleDelete() {
    await roleApi.batchDeleteAdminRole({ ids: selectedRowKeys.value }, reload)
  }


  function handleAssignPermPolicy(record) {
    openSubjectAuthorize(true, { 
      apiNamespaceCode: props.apiNamespaceCode,
      subjectId: record.id,
      subjectType: '1',
      subjectName: record.roleName,
      config: {
        assignSubjectPermPolicyApi: permPolicyApi.assignPermPolicyToRole,
        success: () => {
          console.log("操作成功")
        }
      }
    })
  }

  function handleRoleSubject(record) {
    openRoleUserDrawer(true, {
      record,
      adminFlag: true
    })
  }

  function getTableAction(record) {
    return [
      {
        label: "主体",
        ifShow: () => record.roleCode !== RoleEnum.OWNER,
        onClick: handleRoleSubject.bind(null, record),
      },
      {
        label: "详情",
        onClick: handleDetail.bind(null, record),
      },
    ]
  }

  function getDropDownAction(record) {
    let resp: any = [
      {
        label: "编辑",
        ifShow: () => record.roleCode !== RoleEnum.OWNER,
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "授权",
        // ifShow: () => isManageOrPlatform(userStore) || userStore.getUserInfo.userName === "admin",
        onClick: handleAssignPermPolicy.bind(null, record),
      },
    ]
    resp.push({
      label: "删除",
      disabled: record.sysBuiltIn || record.roleCode == 'AdminRole',
      popConfirm: {
        title: `是否确认删除 ${record.roleName}`,
        confirm: handleDelete.bind(null, record),
      },
    })

    return resp
  }

</script>
